<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
      css 设置样式
          通过元素的style属性进行设置
          style ="样式名 ：样式值；样式名：样式值;... ..."
    
    块元素：自己独占一行的元素，块元素的CSS样式的宽，高等等 往往都是生效小
        div
    行内元素：不会自己独占一行元素，行内的CSS样式的宽，高等等 往往都是生效小
        span
          -->
   <div style ="width :500px; height: 400px;background-color: chartreuse;">
        <div style=" width: 400px; height: 100px;background-color: beige;margin: 10px auto;">
            <span style="color: blueviolet;">页面开头部分</span>
        </div>
        <div style=" width: 400px; height: 100px;background-color:blueviolet;margin: 10px auto;">
            <span style="color:beige;">页面中间部分</span>
        </div>
        <div style="width: 400px; height: 100px;background-color: burlywood;margin: 10px auto;">
            <span style="color: blueviolet;">页面结尾部分</span>
        </div> 
    </div>
    
</body>
</html>